<template>
  <div class="order-container">
    <div @click="fly('/')">首页</div>
    <div class="header">订单记录</div>
    <div class="order-list">
      <div v-for="item in arr" :key="item.id" class="order-item">
        <img :src="require('@/assets/' + item.img)" alt="Product Image" class="product-image">
        <div class="product-details">
          <div class="product-name">{{ item.name }}</div>
          <div class="product-count">数量: {{ item.count }}</div>
          <div >价格: {{ item.count*item.cost }}元</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data()
    { let result = localStorage.getItem('id');
      return{
        arr:JSON.parse(localStorage.getItem('cart')),
        temp:{},
        userId:result,
        temp1:{},
      }
    },
  mounted() {
    this.load()
  },
  methods:
      { async load() {
         console.log(this.arr)
          if(localStorage.getItem('fool')=='2'&&localStorage.getItem('f')!='1') {
            for (let i = 0; i < this.arr.length; i++) {
              this.temp.userId = this.arr[i].userId
              this.temp.bikeId = this.arr[i].bikeId
              this.temp.img = this.arr[i].img
              this.temp.name = this.arr[i].pron
              this.temp.count = this.arr[i].count
              this.temp.cost = this.arr[i].cost
              console.log(this.temp)
              await this.$axios.post('/orderins', this.temp)
            }
          }
          if(localStorage.getItem('f')=='1')
          {     this.temp1=JSON.parse(localStorage.getItem('buy'))
            console.log(this.temp1)
            this.temp.img=this.temp1.img
            this.temp.count=this.temp1.count
            this.temp.name=this.temp1.pron
            this.temp.cost=this.temp1.cost
            this.temp.userId = this.userId
            console.log(localStorage.getItem('b'))
            this.temp.bikeId=JSON.parse(localStorage.getItem('b'))
            console.log(this.temp.bikeId)
            await this.$axios.post('/orderins', this.temp)
          }
          let result = await this.$axios.get('/ordersell/' + this.userId)
          this.arr = result.data.data
        },
        async fly(url)
        {
          location.href=url
        }
      }


}
</script>

<style scoped>
.order-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.header {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.order-list {
  display: flex;
  flex-direction: column;
}

.order-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.product-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin-right: 20px;
}

.product-details {
  flex-grow: 1;
}

.product-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.product-count {
  color: #666;
}
</style>